<template>
  <div class="search-bar">
    <div class="item"
         v-for="(item,index) in list"
         :key="index"
         @click="currentClick(index)"
         :class="{action:currentIndex==index}">{{item}}
    </div>
  </div>
</template>

<script>
export default {
  name: 'searchBar',
  props: {
    list: {
      type: Array,
      default () {
        return []
      }
    },
    content: {
      type: String,
      default () {
        return ''
      }
    }
  },
  data () {
    return {
      currentIndex: 0
    }
  },
  methods: {
    currentClick (index) {
      this.currentIndex = index;
      switch (index) {
        case 0: this.$router.push('/search/songs/' + this.content); break;
        case 1: this.$router.push('/search/artist/' + this.content); break;
        case 2: this.$router.push('/search/playlist/' + this.content); break;
        case 3: this.$router.push('/search/album/' + this.content); break;
        case 4: this.$router.push('/search/mv/' + this.content); break;
      }
    }
  }
}
</script>

<style scoped>
.search-bar {
  height: 49px;
  width: 100%;
  color: #333;
}
.item {
  float: left;
  width: 100px;
  height: 100%;
  text-align: center;
}
.action {
  border-bottom: 2px solid #5c5e61;
}
</style>
